<template>
<!-- <div>这是下载器预警设置</div> -->
<div class="block">
    <div class="header">
        <span class="demonstration">接收人: &nbsp;</span>
        <el-select style="width:400px;" v-model="acceptName" size="small" multiple filterable clearable :placeholder="showAcceptName">
            <el-option v-for="item in acceptNameOptions" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="saveUser">确定</el-button>
    </div>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="预警参数" name="first" style="min-height:400px;">
                参数设置:
                <div>
                    <el-select v-model="dataType" size="small" @change="linkTableData" filterable clearable placeholder="数据类型">
                        <el-option v-for="item in dataTypeOptions" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <el-select v-model="one" size="small" @change="linkTableData" filterable clearable placeholder="一级分类">
                        <el-option v-for="item in oneOptions" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <el-select v-model="two" size="small" @change="linkTableData" @focus="getTwo" filterable clearable placeholder="二级分类">
                        <el-option v-for="item in twoOptions" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </div>

                <div class="clearHeight">
                    <ul style="margin-left: -36px;">
                        <li v-for="(item, index) in inputAddDomList" :key="index">
                            <el-input style="width: 180px;" size="small" type="number" v-model.trim="item.inputNum" placeholder="输入数据量级"></el-input>
                            <el-input style="width: 180px;" size="small" type="number" v-model.trim="item.inputRatio" placeholder="输入触发比例%"></el-input>(%)
                            <el-button size="small" style="margin-left:15px;" @click="saveInput(item)">确定</el-button>
                            <i class="el-icon-circle-plus" @click="addList"></i>
                        </li>
                    </ul>
                </div>

                <div>
                    <span class="demonstration">参数列表: &nbsp;</span>
                    <el-table :data="tableData" border style="width: 100%;margin-top:15px;">
                        <el-table-column prop="dataTypeName" label="数据类型" width="180">
                        </el-table-column>
                        <el-table-column prop="channelTypeName" label="一级分类" width="180">
                        </el-table-column>
                        <el-table-column prop="appTypeName" label="二级分类">
                        </el-table-column>
                        <el-table-column prop="num" label="数据量级">
                        </el-table-column>
                        <el-table-column prop="ratio" label="触发比例(%)">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination id="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="原因解析" name="second" style="min-height:400px;">
                解析设置:
                <div>
                    <el-select v-model="reasonHeaderData.reasonDataType" size="small" filterable clearable placeholder="数据类型">
                        <el-option v-for="item in reasonHeaderData.reasonDataTypeOptions" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <el-select v-model="reasonHeaderData.reasons" @change="clearSetting" @focus="getReasons" size="small" filterable clearable placeholder="原因解析">
                        <el-option v-for="item in reasonHeaderData.reasonsOptions" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <el-select v-model="reasonHeaderData.settings" @focus="getSetting" size="small" filterable clearable placeholder="占比设置">
                        <el-option v-for="item in reasonHeaderData.settingsOptions" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <br/>
                    <el-input style="width: 180px;" @keydown="handleInput" v-model.trim="reasonHeaderData.defaultRatio" size="small" type="text" placeholder="点击输入默认占比"></el-input>
                    <el-input style="width: 180px;" v-model.trim="reasonHeaderData.triggerRatio " size="small" type="text" placeholder="点击触发条件"></el-input>
                    <el-button size="small" type="primary" @click="reasonSave" style="margin-left:15px;">确定</el-button>
                </div>
                <div>
                    <span class="demonstration">参数列表: &nbsp;</span>
                    <el-table :data="reasonHeaderData.reasonTableData" border style="width: 70%;margin-top:15px;">
                        <el-table-column prop="resolveName" label="解析原因">
                        </el-table-column>
                        <el-table-column prop="defaultRatio" label="默认占比" width="220">
                        </el-table-column>
                        <el-table-column prop="triggerRatio" label="触发条件" width="220">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleDelete(scope.$index, scope.row)" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination id="pagination" @size-change="reasonHandleSizeChange" @current-change="reasonhandleCurrentChange" :current-page="reasonHeaderData.currentPage" :page-sizes="[10,20,30]" :pagem-size="reasonHeaderData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="reasonHeaderData.total">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            getDataByappTypeURL: '' + this.$store.state.domain + '/bzDCP/warning/page',
            getDataByTwoURL: '' + this.$store.state.domain + '/bzDCP/warning/getAppType',
            postDataSaveURL: '' + this.$store.state.domain + '/bzDCP/warning/save',
            postDataSaveUserURL: '' + this.$store.state.domain + '/bzDCP/warning/updateAccpetUser',
            postDataFindUserURL: '' + this.$store.state.domain + '/bzDCP/warning/find', //查询预警参数
            postDataDeleteURL: '' + this.$store.state.domain + '/bzDCP/warning/delete',
            //原因解析
            getReasonURL: '' + this.$store.state.domain + '/bzDCP/warnResolve/getCause', //查询原因解析
            getSettingURL: '' + this.$store.state.domain + '/bzDCP/warnResolve/getSetting', //查询占比设置
            saveInputURL: '' + this.$store.state.domain + '/bzDCP/warnResolve/save', //预警解析设置原因解析存储
            getReasonTableDataURL: '' + this.$store.state.domain + '/bzDCP/warnResolve/find', //分页，获取表格信息
            reasonDataDeleteURL: '' + this.$store.state.domain + '/bzDCP/warnResolve/delete', //原因解析删除
            activeName: 'first',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            firstSelect: true,
            thisSelect: false,
            defaultAccounting: '', // 默认占比
            inputRatio: '', // 输入触发条件
            inputNum: '', //输入数据量级
            showAcceptName: '',
            showAcceptNameOptions: [],
            acceptName: '', //接受人姓名
            acceptNameOptions: [],
            dataTypeOptions: [], //数据类型
            dataType: '',
            oneOptions: [], // 一级分类
            one: '',
            twoOptions: [], // 二级分类
            two: '',
            tableData: [], // 原因解析数据
            inputAddDomList: [{
                inputNum: '',
                inputRatio: '',
            }],
            reasonHeaderData: {
                reasonDataTypeOptions: [], //原因解析数据类型
                reasonDataType: '',
                reasonsOptions: [], //原因解析
                reasons: '',
                settingsOptions: [], //占比设置
                settings: '', // 预警参数数据
                defaultRatio: '', //默认占比
                triggerRatio: '', //触发条件
                reasonTableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        }
    },
    created() {
        this.getData();
        this.getTableData();
        this.getReasonTableData();
    },
    methods: {
        handleInput(e) {
         
        },
        //解析设置，获取原因解析
        getReasons() {
            let _this = this.reasonHeaderData;
            console.log(_this.reasonDataType);
            if (_this.reasonDataType == '') {
                this.$message.warning('请先选择数据类型!');
                return;
            }
            this.$ajax.post(this.getReasonURL, this.qs.stringify({
                    dataTypeName: _this.reasonDataType
                }))
                .then(response => {
                    if (response.data.code == 0) {
                        _this.reasonsOptions = response.data.content;
                    } else if (response.data.code == 1) {
                        this.$message.warning(response.data.msg);
                        return;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        //解析设置，获取占比设置
        getSetting() {
            let _this = this.reasonHeaderData;
            this.$ajax.post(this.getSettingURL, this.qs.stringify({
                    causeName: _this.reasons
                }))
                .then(response => {
                    if (response.data.code == 0) {
                        _this.settingsOptions = response.data.content;
                    } else if (response.data.code == 1) {
                        this.$message.warning(response.data.msg);
                        return;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        //删除原因解析时清空占比设置
        clearSetting() {
            this.reasonHeaderData.settings = '';
        },
        //预警解析设置原因解析存储
        reasonSave() {
            let _this = this.reasonHeaderData;
            if (_this.reasonDataType == '') {
                this.$message.warning('数据类型不能为空!');
                return;
            } else if (_this.reasons == '') {
                this.$message.warning('原因解析不能为空!');
                return;
            } else if (_this.settings == '') {
                this.$message.warning('占比设置不能为空!');
                return;
            } else if (_this.defaultRatio == '') {
                this.$message.warning('默认占比不能为空!');
                return;
            } else if (_this.triggerRatio == '') {
                this.$message.warning('触发条件不能为空!');
                return;
            };
            this.$ajax.post(this.saveInputURL, this.qs.stringify({
                    dataTypeName: _this.reasonDataType,
                    causeName: _this.reasons,
                    settingName: _this.settings,
                    defaultRatio: _this.defaultRatio,
                    triggerRatio: _this.triggerRatio
                }))
                .then(response => {
                    if (response.data.code == 0) {
                        this.getReasonTableData();
                        this.$message.warning('解析设置成功!');
                        _this.defaultRatio = '';
                        _this.triggerRatio = '';
                        return;
                    } else if (response.data.code == 1) {
                        this.$message.warning(response.data.msg);
                        return;
                    } else {
                        this.$message.warning('网络错误!');
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        //获取原因解析参数列表
        getReasonTableData() {
            let _this = this.reasonHeaderData;
            _this.currentPage = 1;
            this.$ajax.post(this.getReasonTableDataURL, this.qs.stringify({
                    currentPage: _this.currentPage,
                    pageSize: _this.pageSize,
                    dataTypeName: _this.reasondataType,
                    causeName: _this.reasons
                }))
                .then(response => {
                    if (response.data[0].code == 0) {
                        _this.reasonTableData = response.data[0].content.content;
                        _this.total = response.data[0].content.totalCount;
                    } else if (response.data[0].code == 1) {
                        this.$message.warning(response.data[0].msg);
                        return;
                    } else {
                        this.$message.warning('网络错误!');
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        //原因解析分页
        reasonHandleSizeChange(pageSize) {
            let _this = this.reasonHeaderData;
            _this.pageSize = pageSize;
            _this.currentPage = 1;
            this.$ajax.post(this.getReasonTableDataURL,
                    this.qs.stringify({
                        currentPage: _this.currentPage,
                        pageSize: _this.pageSize,
                        dataTypeName: _this.reasondataType,
                        causeName: _this.reasons
                    })
                )
                .then(response => {
                    if (response.data[0].code == 0) {
                        this.getReasonTableData();
                    } else if (response.data[0].code == 1) {
                        this.$message.warning(response.data[0].msg);
                        return;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        },
        reasonhandleCurrentChange(currentPage) {
            let _this = this.reasonHeaderData;
            _this.currentPage = currentPage;
            this.$ajax.post(this.getReasonTableDataURL,
                    this.qs.stringify({
                        currentPage: _this.currentPage,
                        pageSize: _this.pageSize,
                        dataTypeName: _this.reasondataType,
                        causeName: _this.reasons
                    })
                )
                .then(response => {
                    if (response.data[0].code == 0) {
                        _this.reasonTableData = response.data[0].content.content;
                        _this.total = response.data[0].content.totalCount;
                    } else if (response.data[0].code == 1) {
                        this.$message.warning(response.data[0].msg);
                        return;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        //获取数据类型,一级分类
        getData() {
            this.$ajax.post(this.getDataByappTypeURL, this.qs.stringify({}))
                .then(response => {
                    if (response.status == 200) {
                        let _this = this.reasonHeaderData;
                        this.dataTypeOptions = response.data[0].DataType;
                        _this.reasonDataTypeOptions = response.data[0].DataType;
                        this.oneOptions = response.data[0].ChannelType;
                        this.acceptNameOptions = response.data[0].AutoCompleteAcceptUser;
                        this.showAcceptNameOptions = response.data[0].AcceptUser;
                        let tempArry = [];
                        this.showAcceptName = '';
                        for (let i = 0; i <= this.showAcceptNameOptions.length; i++) {
                            tempArry.push(this.showAcceptNameOptions[i].nickname);
                            this.showAcceptName = tempArry.join();
                        }
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        changeSelect() {
            this.thisSelect = true;
            this.firstSelect = false;
        },
        //获取二级分类
        getTwo() {
            this.$ajax.post(this.getDataByTwoURL, this.qs.stringify({
                    channelType: this.one
                }))
                .then(response => {
                    if (response.status == 200) {
                        this.twoOptions = response.data;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        //查询预警参数
        getTableData() {
            this.currentPage = 1;
            this.$ajax.post(this.postDataFindUserURL, this.qs.stringify({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    dataTypeName: this.dataType,
                    channelTypeName: this.one,
                    appTypeName: this.two,
                }))
                .then(response => {
                    if (response.status == 200) {
                        this.tableData = response.data[0].content.content;
                        this.total = response.data[0].content.totalCount;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },
        linkTableData() {
            this.currentPage = 1;
            this.$ajax.post(this.postDataFindUserURL, this.qs.stringify({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    dataTypeName: this.dataType,
                    channelTypeName: this.one,
                    appTypeName: this.two,
                }))
                .then(response => {
                    if (response.status == 200) {
                        this.tableData = response.data[0].content.content;
                        this.total = response.data[0].content.totalCount;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
        },

        //保存接收人
        saveUser() {
            if (this.acceptName == '') {
                this.$message.warning('接收人不能为空!');
            } else {
                this.$ajax.post(this.postDataSaveUserURL, this.qs.stringify({
                        acceptIds: this.acceptName
                    }, {
                        indices: false
                    }))
                    .then(response => {
                        if (response.data.code == 0) {
                            this.$message.warning(response.data.msg);
                            return;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
            }
        },
        //保存数据量级触发比例
        saveInput(item) {
            if (this.dataType == '') {
                this.$message.warning("数据类型不能为空!");
                return;
            } else if (item.inputNum == '') {
                this.$message.warning("数据量级不能为空!");
                return;

            } else if (item.inputRatio == '') {
                this.$message.warning("触发比例不能为空!");
                return;
            } else {
                this.$ajax.post(this.postDataSaveURL, this.qs.stringify({
                        dataTypeName: this.dataType,
                        channelTypeName: this.one,
                        appTypeName: this.two,
                        num: item.inputNum,
                        ratio: item.inputRatio
                    }))
                    .then(response => {
                        if (response.data.code == 0) {
                            this.$message.warning('参数设置成功!');
                            item.inputNum = '',
                                item.inputRatio = ''
                            this.getTableData();

                        } else if (response.data.code == 1) {
                            // this.total = response.data.totalPage;
                            this.$message.warning(response.data.msg);
                            item.inputNum = '',
                                item.inputRatio = ''
                            return;
                        } else {
                            this.$message.warning("网络错误！");
                            return;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
            }

        },
        addList() {
            this.inputAddDomList.push({
                inputNum: '',
                inputRatio: ''
            })
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            // this.loading = true;
            this.$ajax.post(this.postDataFindUserURL,
                    this.qs.stringify({
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        dataTypeName: this.dataType,
                        channelTypeName: this.one,
                        appTypeName: this.two,
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.tableData = response.data[0].content.content;
                        this.total = response.data[0].content.totalCount;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    // this.loading = false
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.$ajax.post(this.postDataFindUserURL,
                    this.qs.stringify({
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        dataTypeName: this.dataType,
                        channelTypeName: this.one,
                        appTypeName: this.two,
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.tableData = response.data[0].content.content;
                        this.total = response.data[0].content.totalCount;
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        //删除参数配置项
        handleDelete(index, row) {
            if (this.activeName == 'first') {
                this.$ajax.post(this.postDataDeleteURL,
                        this.qs.stringify({
                            warnId: row.id,
                        })
                    )
                    .then(response => {
                        if (response.data.code == 0) {
                            this.$message.warning(response.data.msg);
                            this.getTableData();
                            return;
                        } else if (response.data.code == 1) {
                            this.$message.warning(response.data.msg);
                            return;
                        } else {
                            this.$message.warning("网络错误！");
                            return;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            } else {
                this.$ajax.post(this.reasonDataDeleteURL,
                        this.qs.stringify({
                            id: row.id,
                        })
                    )
                    .then(response => {
                        if (response.data.code == 0) {
                            this.getReasonTableData();
                            this.$message.warning(response.data.msg);
                            return;
                        } else if (response.data.code == 1) {
                            this.$message.warning(response.data.msg);
                            return;
                        } else {
                            this.$message.warning("网络错误！");
                            return;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        },
        handleClick() {},
    }
}
</script>

<style scoped>
ul li {
    list-style: none;
}

div {
    margin-top: 15px;
}

.clearHeight {
    margin-top: 0px;
}
</style>
